<template>
  <!-- 针对iPhone X 等机型底部存在指示条的， 开启顶部/底部安全区适配 -->
  <router-view class="router-view" v-slot="{ Component }" safe-area-inset-top :safe-area-inset-bottom="!showFoot">
    <transition :name="animationName">
      <!--  keep-alive中包含include 和 exclude ，它匹配首先检查组件自身的 name 选项-->
      <keep-alive :include="store.keepAlive.keepAlive">
        <component :is="Component" style="overflow-y: auto" />
      </keep-alive>
    </transition>
  </router-view>
  <Foot v-if="showFoot" safe-area-inset-bottom></Foot>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import store from '@/store'
import Foot from '@/components/Foot.vue'
const route = useRoute()
let animationName = ref('')
let showFoot = ref(false)
let keyIsShow = ref(false)

watch(
  () => JSON.parse(JSON.stringify(route)),
  (to, from) => {
    //控制底部tab栏的显示与隐藏
    let name = route.name
    let footArr = ['home', 'list', 'mine']
    if (footArr.indexOf(name) != -1) {
      showFoot.value = true
    } else {
      showFoot.value = false
    }

    /*
      // 注意==》如果从二级页面进入一级页面，再从一级页面返回至该二级页面，上面的前进后退动画就会反向；这里还需要做判断（事先在路由中的meta标签中定义专属于这两个标签的变量！！！！）
      if (to.meta.index < from.meta.index && to.meta.goSearch > from.meta.goSearch) {
        animationName.value = 'fold-left'
      } else if (to.meta.index > from.meta.index && to.meta.goSearch < from.meta.goSearch) {
        animationName.value = 'fold-right'
      }
    */
    // 如果to索引大于from索引,判断为前进状态,反之则为后退状态
    if (to.meta.index > from.meta.index) {
      animationName.value = 'fold-left'
    } else if (to.meta.index < from.meta.index) {
      animationName.value = 'fold-right'
    } else {
      animationName.value = ''
    }
  },
  { deep: true }
)

onMounted(() => {
  listenerKeyboard() //全局监听软键盘弹出
})

// 移动端监听软键盘弹出事件
function listenerKeyboard() {
  var oldHeight = window.innerHeight
  window.addEventListener('resize', function () {
    var newHeight = window.innerHeight
    if (oldHeight - newHeight > 50) {
      keyIsShow.value = true
    } else if (oldHeight == newHeight) {
      window.setTimeout(function () {
        keyIsShow.value = false
      }, 300)
    }
    // Document 对象的activeElement 属性返回文档中当前获得焦点的元素。
    if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
      window.setTimeout(function () {
        document.activeElement.scrollIntoViewIfNeeded()
      }, 0)
    }
  })
}
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-size: 14px;
}
.router-view {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.fold-left-enter-active {
  animation: fold-left-in 0.3s;
}
.fold-left-leave-active {
  animation: fold-left-out 0.3s;
}
.fold-right-enter-active {
  animation: fold-right-in 0.3s;
}
.fold-right-leave-active {
  animation: fold-right-out 0.3s;
}
@keyframes fold-left-in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes fold-left-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes fold-right-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes fold-right-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
</style>
